<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>
<script>
    // 折线图
    var names = [];    //类别数组（实际用来盛放X轴坐标值）
    var series = [];
    $.ajax({
        url: "test.json",
        data: {},
        type: 'GET',
        success: function(data) {

            //请求成功时执行该函数内容，data即为服务器返回的json对象
            $.each(data, function (index, item) {
                names.push(item.date);    //挨个取出类别并填入类别数组
                series.push(item.doneNum);
            });

            console.log(JSON.stringify(data))
            hrFun(data);

        },
    });
    // 心率
    var hrChart = echarts.init(document.getElementById("main"));
    function hrFun(data) {
        hrChart.setOption({
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['心率值']
            },
            grid: {
                left: '3%',
                right: '20%',
                bottom: '20%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: names
            }],
            yAxis: [{ // 纵轴标尺固定
                type: 'value',
                scale: true,
                name: '心率值',
                max: 140,
                min: 0,
                splitNumber: 20,
                boundaryGap: [0.2, 0.2]
            }],
            series: [{
                name: '心率',
                type: 'line',
                data: series
            }]
        }, true);
    }
</script>
</body>
</html>